<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>小黄人</title>
		<link href="css/reset.css" rel="stylesheet" />
		<link href="css/skin.css" rel="stylesheet" />
		<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
		<script src="js/queryloader2.min.js" type="text/javascript"></script>
			<script src="js/run.js" type="text/javascript"></script>
		<script src="muplayer-0.9.2/dist/player.js" type="text/javascript"></script>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
		</style>
	</head>

	<body>
		<div class="run_con">

		</div>
		<div class="progress" id="progress">
			<div><span class="progress_Bar"><span class="progress_percent" id="pg"></span></span><span class="time" id="time">0</span>秒</div>
			<div>您已经跑了<span class="length" id="length">0</span>米</div>
		</div>
		<div class="running_person"></div>
		<div class="running_handler" id="running_handler"></div>
		<div class="running_tips"></div>
		<div class="mask" id="mask">
			<p>Are you ready?
				<br/> Let's go!
				<br />
				<span class="countdown" id="countdown">3</span>
			</p>
		</div>
		<div class="mask" id="result" style="display:none;">
			<div style="position:relative; overflow: scroll; height: 100%;">
			<div class="result">
				<div class="result_length">恭喜！您的最高成绩为<span class="special"><label id="allLength">240</label>米</span>
				</div>
				<div class="result_top">目前排名，第<span class="special"><label id="top">24</label>名</span>
				</div>
                <div class="jp">城会玩！<em>目前</em>您已经获得<em class="special">无人机</em>的资格</div>
                <div class="sm">以上排名为目前排名，<br/>最终排名和奖品我们奖在10月30官方微信进行公布，<br/>多玩几次刷新自己的成绩吧！别人也在加油哦！</div>
			</div>
			<div class="button_con">
				<div><a class="red_btn">不服再战</a>
				</div>
				<div><a class="lemon_btn">查看排行</a><a class="lemon_btn">活动规则</a>
				</div>
			</div>
			<div class="realy_button">
				<div id="again"><a id="again_btn" href="javascript:void(0);">&nbsp;</a>
				</div>
				<div><a id="checkTop" href="javascript:void(0);">&nbsp;</a><a id="rule" href="javascript:void(0);">&nbsp;</a>
				</div>
			</div>
			</div>
		</div>
		<div class="mask popInfo" id="topList">
			<div class="popInfo_content">
				<div id="table">

					<table>
						<tr>
							<th style="width: 60px">排名</th>
							<th style="width: 40px">头像</th>
							<th>昵称</th>
							<th>成绩</th>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200米</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200米</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200米</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200米</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200米</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200米</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200米</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200米</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200米</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200米</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200米</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200米</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200米</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200米</td>
						</tr>
						<tr>
							<td><span>1</span></td>
							<td>
								<img src="http://wx.qlogo.cn/mmopen/aK3rRLWD6xic05GickWkgK02Uaic9FsDiaUkQ7D3Up2M57vib0pytHEO9yicRqsMVXicWeXe5knZZiaRBgnN2vUnGGsV6gOtsbho6oeq/0" /></td>

							<td>姓名</td>
							<td>200米</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<div class="mask" id="share" style="display:none;">
			<img src="img/share.png" />
		</div>
		<div class="rule_con">
			<div class="rule_body">
				<h2>【活动规则 】</h2>
				<p><em>1、活动时间：</em>即日起至10月30日晚上8点截止</p>
<p><em>2、领奖时间：</em>2015年10月31日10:00－17:30，逾期视为放弃领奖。</p>
<p><em>3、奖品设置：</em>共设置航拍无人机，南湖梦幻岛门票，精致水杯等礼品共计1000份（也就是中奖几率大大的哦）</p>
<p><em>4、奖品设置规则:</em></p>
<p>A，我们将根据活动期间内参与者的单次跑步长度进行排名，并在10月30日晚上9点通过【北京街】微信公众号公布本次活动成绩排名及中奖者名单，未中奖者不予公布。</p>
<p>B，每人可多次参与活动，但只有一次获奖资格，举例来说，A几次参与活动的排名都在1000名以内的，按最好名次获奖。</p>
<p>C，第一名将获得我们送出的航拍无人机1台；</p>
<p>D，第2-100名将获得我们送出的南湖梦幻岛门票1张；</p>
<p>E，第101-1000名将获得我们送出的玻璃杯套装一份；</p>
<p>F，排名在1000名以后的，没有资格获取任何奖品。</p>
<p><em>5、特别说明：</em></p>
<p>A，本次活动所有奖品均需获奖者本人到北京街销售中心，经验证身份后当场领取。（地址：成都市天府新区华阳街道府河路上段南湖桥头）；</p>
<p>B，本次奖品发放将严格按照微信系统统计排名进行发放，相应名词对应相应礼品，将在10月30日通过官方微新公布最终排名；</p>
<p>C，本次活动最终解释权归开发商所有；</p>
			</div><div class="other"><em>备注：</em><div>无人机为司马X8W大型高清航拍
          四轴手机图传遥控飞机</div></div>
		</div>
		<script>
			$("body").queryLoader2({
				barColor: "#efefef",
				backgroundColor: "#111",
				percentage: true,
				barHeight: 1,
				minimumTime: 200,
				fadeOutTime: 1000,
				onComplete: function() {
					swimming.countdown();
					$(window).bind("touchmove", function(e) {
						if ($(e.target).parents('#table').length == 0 && $(e.target).parents('.rule_body').length == 0&&$(e.target).parents("#result").length==0) {
							e.preventDefault();
						}
					});
					$("#rule").bind("click", function(e) {
						$(".rule_con").addClass("open");
					});
					$(".rule_con").bind("click", function() {
						$(this).removeClass("open");
					});
					$("#checkTop").bind("click", function(e) {
						$("#topList").addClass("open");
					});
					$("#topList").bind("click", function() {
						$(this).removeClass("open");
					});
					$("#again_btn").bind("click", function() {
						$("#share").show();
					});
					$("#share").bind("click", function() {
						$(this).hide();
					});
				}
			});
		</script>
	</body>

</html>